<template>
  <div class="brand m1200">
    <ul class="brandList">
      <li class="brandItem">
        <img src="./images/brand_03.png" alt="" />
      </li>
      <li class="brandItem">
        <img src="./images/brand_05.png" alt="" />
      </li>
      <li class="brandItem">
        <img src="./images/brand_07.png" alt="" />
      </li>
      <li class="brandItem">
        <img src="./images/brand_09.png" alt="" />
      </li>
      <li class="brandItem">
        <img src="./images/brand_11.png" alt="" />
      </li>
      <li class="brandItem">
        <img src="./images/brand_13.png" alt="" />
      </li>
      <li class="brandItem">
        <img src="./images/brand_15.png" alt="" />
      </li>
      <li class="brandItem">
        <img src="./images/brand_17.png" alt="" />
      </li>
      <li class="brandItem">
        <img src="./images/brand_19.png" alt="" />
      </li>
      <li class="brandItem">
        <img src="./images/brand_21.png" alt="" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Brand",
  data() {
    return {};
  },
};
</script>

<style scoped lang="less">
.brand {
  .brandList {
    overflow: hidden;
    padding: 20px 0;
    background: #f7f7f7;
    line-height: 18px;

    .brandItem {
      width: 120px;
      float: left;
      height: 37px;

      img {
        border-left: 1px dotted #ccc;
        padding: 0 10px;
      }
    }
    .brandItem:first-child img {
      border-left: 0;
    }
  }
}
</style>
